import React from "react";
import {connect} from "dva";
import {Breadcrumb, Layout, Table, Row, Col, Input, Button} from "antd";
import PropTypes from "prop-types";
import {routerRedux} from "dva/router";
import {AdvancedSearch, DataTable} from "../../components";
import list from "../common/list.less";
import locate from "../common/locate.css";
import setup from "./setup.css";
import UserAeModal from "./UserAeModal";

import auth from '../../utils/auth'

function User({location, dispatch, state, loading}) {

  const {modal} = state

  const {Content} = Layout
  const {Item} = Breadcrumb
  const {Search} = Input

  const columns = [
    {
      title: '这是',
      dataIndex: 'id',
      key: 'id'
    }, {
      title: 'QQ号',
      dataIndex: 'qq',
      key: 'qq'
    }, {
      title: '名字',
      dataIndex: 'name',
      key: 'name'
    }, {
      title: '操作',
      render: (text, record) => <a onClick={()=>dispatch({type: 'user/showModal',payload:{type:'update',item:record}})}>编辑</a>
    }
  ];

  //添加编辑弹出框
  const modalProps = {

    title: (modal.type == 'add') ? '用户添加':'用户编辑',
    visible: modal.visible,
    item:modal.item,
    onOk(dt) {

      console.log(dt);

      console.log(modal.type);



      dispatch({type: `user/${modal.type}`,payload:dt})
    },
    onCancel() {
      dispatch({type: 'user/hideModal'})
    }

  };

  const {pathname, query} = location

  let search = {};


  console.log(auth)
  console.log(auth.contains('asdfasdfasf'))


  return (
    <div>
      <Breadcrumb className={setup.bread_crumb}>
        <Item>设置</Item>
        <Item>系统管理</Item>
        <Item>用户</Item>
      </Breadcrumb>
      <Content className={setup.content}>
        <Row className={list.search}>
          <Col span={18}>
            <Search
              className={list.search_input}
              placeholder="请输入用户名、帐号或者部门"
              defaultValue={query.kw}
              onSearch={
                (vl) => {
                  if (vl) {
                    query.kw = vl
                  }else {
                    delete query.kw
                  }
                  query.page = 1
                  dispatch(routerRedux.push({pathname, query}));
                }
              }/>
            <AdvancedSearch width={300} style={{
              marginLeft: 10
            }} onSearch ={()=>{
              return false
            }}>
              <input ref={r=>search.name = r}/>
            </AdvancedSearch>
          </Col>
          <Col span={6} className={locate.text_right}>
            <Button onClick={e => dispatch({type: 'user/showModal',payload:{type:'add',item:{}}})}>添加</Button>
          </Col>
        </Row>
        <DataTable url="/api/v1/sys/users" columns={columns} route={{location, dispatch}}/>
      </Content>
      <UserAeModal {...modalProps}/>
    </div>
  );
}

User.propTypes = {
  user: PropTypes.object,
  loading: PropTypes.object
}

export default connect(({user, loading}) => ({state: user, loading}))(User);
